<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="header-top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>启动页列表</el-breadcrumb-item>
              </el-breadcrumb>
              <h2 class="title">启动页列表</h2>
            </div>
            <div class="row">
              
              <el-row style="margin-bottom:20px">

                <el-button type="primary" @click="addJob" >添加启动页</el-button>
              </el-row>

              <el-table
                :data="tableData"
                border
                :cell-style="{'text-align':'center'}"

                :header-cell-style="{
                  'background-color': '#f5f5f5',
                  'color':'#555',
                  'text-align':'center'
                }"
                style="width: 100%"> 
                <el-table-column
                  prop="paraText"
                  label="参数文本">
                </el-table-column>  
                <el-table-column
                  prop="paraValue"
                  label="参数值">
                </el-table-column>  
                <el-table-column
                  prop="paraRemark"
                  label="是否可用"
                  :formatter='formremark'
                  >
                  <!-- <template slot-scope="scope">

                    <el-button @click="showClick(scope.row)" type="text" size="small" v-if="scope.row.paraRemark == '0'">不可用</el-button>
                    <el-button @click="showClick(scope.row)" type="text" size="small" v-if="scope.row.paraRemark == '1'">可用</el-button>
                  </template> -->
                </el-table-column>
                
                <el-table-column
                  label="操作"
                  width="360">
                  <template slot-scope="scope">
                    <el-button @click="remove(scope.row)" type="text" size="small">移除</el-button>
                    <el-button @click="redactClick(scope.row)" type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
                
              </el-table>

              <el-dialog
                :visible.sync="dialogVisible"
                :close-on-click-modal=true
                custom-class="diaself"
                center
                top='15vh'
                width="30%">
                <el-form :model="ruleForm"   label-width="100px" class="demo-ruleForm">
                  
                  <el-form-item label="参数文本" prop="paraText" >
                    <el-input type="text" v-model="ruleForm.paraText"></el-input>
                  </el-form-item>
                  <el-form-item label="参数值" prop="paraValue" >
                    <el-input type="text" v-model="ruleForm.paraValue"></el-input>
                  </el-form-item>
                  <el-form-item label="是否可用"  required>
                    
                    <el-col :span="10" >
                      <el-form-item  prop="paraRemark"  required>
                        <el-select v-model="ruleForm.paraRemark" >
                          <el-option label="不可用" value="0"></el-option>
                          <el-option label="可用" value="1"></el-option>
                        </el-select>
                        
                      </el-form-item>
                    </el-col>
                  </el-form-item>
   
                  <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleForm)">保存</el-button>

                  </el-form-item>
                </el-form>

              </el-dialog>
    
            </div>

          </div>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script>
import { getCookie,timeChange,getQueryString } from "./until/index";
function init(){
  this.$ajax.get("admGetHomeStartList.ashx?token=" +getCookie("token"))
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
          console.log(data)

          if(data.ParamList.length > 0){

            this.tableData = data.ParamList;
          }else{
            this.tableData=[]
          }
          
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}
function detail(paraID){
  this.$ajax.get("AdmGetSysParametersByParaID.ashx?token=" +getCookie("token")+
        '&paraID='+paraID
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
        console.log(data)
          this.ruleForm = data.ParamList[0]
   
          
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}

function detele(paraID){
  this.$ajax.get("admDeleteHomeStart.ashx?token=" +getCookie("token")+
        '&paraID='+paraID
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
        
         this.$message({
            type: 'success',
            message: res.data.msg,
            onClose:function(){

              window.location.reload();
            }
          }); 
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}
function addjob(){
  
  this.$ajax.get("admSaveHomeStart.ashx?token=" +getCookie("token")+
        '&paraID='+this.ruleForm.paraID+
        '&paraText='+this.ruleForm.paraText+
        '&paraValue='+this.ruleForm.paraValue+
        '&paraRemark='+this.ruleForm.paraRemark
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
        
         this.$message({
            type: 'success',
            message: res.data.msg,
            onClose:function(){
              
              window.location.reload();
              
            }
          }); 
        } else {
          this.$message.error(res.data.msg );
          // console.log(res)
        }
      })
      .catch(error => {
        console.log(error);
      });
}
export default {
  data() {
    return {
      pagesize: 20, //每页显示条数
      currentPage: 1, //初始页
      total: 0, //总条数
      startTime:'',
      dialogVisible:false,
      endTime:'',
      formInline: {
        time:'',//查询时间
        name: '', //标题
      },
      ruleForm: {
        paraID:'00000000-0000-0000-0000-000000000000',
        paraName:'',//参数名称
        paraText:'',//参数文本
        paraValue: '', //参数值
        paraRemark:'',//是否可用
      },

      tableData: [],

    };
  },
  created() {
    
    
    if(getQueryString()){
      
      this.formInline.name = getQueryString()
    }
    init.call(this)
  },
  methods: {
    onSubmit() {
      if(this.formInline.time){

        this.startTime = timeChange(this.formInline.time[0])
        this.endTime = timeChange(this.formInline.time[1])
      }
      
      
      init.call(this)
    },


    redactClick(row){//编辑
      console.log(row)
      detail.call(this,row.paraID)
      
      this.dialogVisible = true
       
      
    },
    remove(row){//移除启动页
      this.$confirm('是否要移除此启动页？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        detele.call(this,row.paraID )
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });          
      });
    },
    addJob(){//添加兼职管理
      this.dialogVisible = true
      
      this.ruleForm = {
        paraID:'00000000-0000-0000-0000-000000000000',
        paraName:'',//参数名称
        paraText:'',//参数文本
        paraValue: '', //参数值
        paraRemark:'0',//是否可用
      }
    },
    submitForm(ruleForm){//保存兼职
      
      this.dialogVisible = false
      addjob.call(this)
      

    },
    formremark(row, column){
      
      if(row.paraRemark == 1){
        return '可用'
      }else if(row.paraRemark == 0){
        return '不可用'
      }
      
    }



    
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.span{position: absolute;right: -28px;top: 0px;padding: 0 10px}
.water{margin-right: 20px;display: inline-block}
.waterTime{font-size: 14px;color: #606266;padding: 0 12px 0 0;box-sizing: border-box;}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  height: 100%;
  min-height: 740px
}

.header-top{
  margin: -20px -20px 20px;
  padding: 15px 20px;
  background: #fff;
  
}
.header-top .title{
  margin:15px 0 0;
  font-weight: 600;
  text-align: center;
  font-size: 20px;
}
.row{
  background: #fff;
  padding: 20px 30px;
  text-align: left
}
.block {
  padding: 20px;
}
.message{
  margin-top: 20px;
}
</style>
  